<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/style.css">
    <script>
        function validateForm() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const email = document.getElementById('email').value;
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            if (username === '' || password === '' || email === '') {
                alert('所有字段都是必填的！');
                return false;
            }

            if (!emailPattern.test(email)) {
                alert('请输入有效的电子邮件地址！');
                return false;
            }

            return true;
        }
    </script>
</head>
<body>
    <div class="register-form">
        <h1>注册</h1>
        <form method="post" onsubmit="return validateForm();">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名" required><br>

            <label for="password">密码:</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" required><br>
            <div id="password-strength" style="display:none;"></div>

            <label for="email">电子邮件:</label>
            <input type="email" id="email" name="email" placeholder="请输入电子邮件" required><br>

            <button type="submit">注册</button>
        </form>
    </div>
    <script>
        document.getElementById('password').addEventListener('input', function() {
            const strengthText = document.getElementById('password-strength');
            const password = this.value;
            let strength = '弱';
            if (password.length > 8 && /[A-Z]/.test(password) && /[0-9]/.test(password)) {
                strength = '强';
            } else if (password.length > 5) {
                strength = '中';
            }
            strengthText.style.display = 'block';
            strengthText.textContent = `密码强度: ${strength}`;
        });
    </script>
</body>
</html>
